<template>
  <view class="my-coupon-detail" v-if="res && !loading">
    <view class="pt-20">
      <!-- 卡券 -->
      <coupon-item :item="res" :showDetailsText="false" :type="Number(res.coupon_Class)" />
    </view>
    
    <!-- 券码 -->
    <view class="coupon-code-box" v-if="type !== '5'">
      <view class="coupon">
        <u-image :src="res.qR_Main_Path" width="388" height="388"></u-image>
      </view>
      <text class="text">门店核销出示扫码</text>
    </view>
    
    <!-- 卡券信息 -->
    <view class="coupon-info">
      <view class="cell">
        <text class="label">有效时间</text>
        <text class="text">{{res.start_Time}} 至 {{res.deadline}}</text>
      </view>
      <view class="cell">
        <text class="label">卡券名称</text>
        <text class="text">{{res.coupon_Name}}</text>
      </view>
      <view class="cell">
        <text class="label">订单金额</text>
        <text class="text">满0元可用</text>
      </view>
    </view>
    
    <!-- 查看门店按钮 -->
    <view class="btn-check-store" v-if="type === '5'">
      <view class="btn" @click="jumpWash"><text>去使用</text></view>
      <view class="safe-area"></view>
    </view>
    <view class="btn-check-store" v-else>
      <view class="btn" @click="jumpStorePage"><text>查看门店</text></view>
      <view class="safe-area"></view>
    </view>
    
  </view>
  
  <view v-else-if="loading && !res">
    <view class="flex flex-ai-c flex-jc-c mt-30"><u-loading status="loading" /></view>
  </view>
  <u-empty mode="coupon" v-else></u-empty>
</template>

<script>
import couponItem from './components/couponItem.vue'
export default {
  components: {
    couponItem
  },
  data() {
    return {
      res: null,
      loading: true,
      type: ''
    }
  },
  computed: {
    couponInfo() {
      return this.$store.state.couponInfo
    }
  },
  onLoad(option) {
    this.type = option.type || ''
    this.getCouponDetails(option.id)
  },
  methods: {
    // 跳转门店页面
    jumpStorePage() {
      uni.switchTab({
        url: '/pages/store/store'
      })
    },
    jumpWash() {
      uni.navigateTo({
        url: '/pages_commodity/selfWash/buyMember'
      })
    },
    async getCouponDetails(id) {
      try{
        let res = await this.$api.user.GetCouponDetails({
          id,
          is_Package: false
        })
        this.res = res.data.couponDetailsResponse
        this.res.coupon_name =  this.res.coupon_Name
        this.res.cost_price =  this.res.cost_Price
        this.loading = false
      }catch(e){
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
  height: 100%;
}
.my-coupon-detail{
  padding-bottom: 140rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
  .coupon-code-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    .coupon{
      width: 450rpx;
      height: 450rpx;
      background-color: #fff;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text{
      color: #666;
      font-size: 28rpx;
      margin-top: 20rpx;
    }
  }
  .coupon-info{
    background-color: #fff;
    padding: 20rpx 24rpx;
    margin-top: 60rpx;
    .cell{
      height: 80rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .label{
        color: #999;
      }
      .text{
        color: #333;
        margin-left: 48rpx;
        display: block;
        flex: 1;
      }
    }
  }
  .btn-check-store{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    .btn{
      height: 110rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      font-size: 32rpx;
      color: #3D3D3D;
    }
    .safe-area{
      height: 0;  
      height: constant(safe-area-inset-bottom);  
      height: env(safe-area-inset-bottom);
      background-color: #FFE23E;
    }
  }
}
</style>
